FalkenDev / SparkRentals-Admin-Dashboard

import {

  MapContainer,

  TileLayer,

  Marker,

  Popup,

  useMap,

  GeoJSON,

  Polyline,

  useMapEvents,

} from "react-leaflet";

import utils from "../../utils/utils";

import * as L from "leaflet";

import ScooterIcon from "../../assets/icons/ScooterMarker.svg";

import "../../Map.css";

import scooterutils from "../../utils/utils";

const Map = ({

  center,

  zoom,

  features,

  scooters,

  cities,

  zoneId,

  add,

  noPopup,

  zoneMarkers,

  setZoneMarkers,

  reverse,

  setReverse,

  setIsLive,

  singleMode,

  setSingleMarker,

  singleMarker,

  setLatLng,

}) => {

  const LeafIcon = L.Icon.extend({

    options: {},

  });

  const scooterIcon = new LeafIcon({

    iconUrl: ScooterIcon,

    iconSize: [68, 95],

    iconAnchor: [34, 95],

    popupAnchor: [-3, -76],

  });

  const areaStyle = (type) => {

    switch (type) {

      case "parkingZone":

        return {

          fillColor: "#96FF71",

          fillOpacity: 0.2,

        };

      case "noParkingZone":

        return {

          fillColor: "#FF6060",

          fillOpacity: 0.4,

          weight: 1,

        };

      case "bonusParkingZone":

        return {

          fillColor: "#C64EFF",

          fillOpacity: 0.4,

          weight: 1,

        };

      case "chargingZone":

        return {

          fillColor: "#638FFF",

          fillOpacity: 0.6,

          weight: 1,

        };

    }

  };

  function Search() {

    const map = useMap();

    if (features) {

      map.panTo(features, zoom);

      //map.setZoom(10);

    }

    return null;

  }

      });

    }

  }

  function AreasDisplay() {

    if (cities) {

      return cities.map((item) => {

        return item.zones.map((data, index) => {

          let geoObject = {

            type: "Feature",

            properties: { zonetype: data.zoneType },

            geometry: {

              type: "Polygon",

              coordinates: [data.coordinates],

            },

          };

          return (

            <GeoJSON

              key={index}

              data={geoObject}

              style={areaStyle(data.zoneType)}

            >

              {noPopup ? null : (

                <Popup>

                  <h1 className="text-xl">{item.name}</h1>

                  <h1 className="text-lf">

                    {utils.zoneNameTranslate(data.zoneType)}: {index}

                  </h1>

                </Popup>

              )}

            </GeoJSON>

          );

        });

      });

    }

  }

  function AddPoints() {

    useMapEvents({

      click(e) {

        setZoneMarkers([...zoneMarkers, [e.latlng.lng, e.latlng.lat]]);

        setReverse([...reverse, [e.latlng.lat, e.latlng.lng]]);

      },

    });

    return zoneMarkers.map((item, index) => {

      return <Marker key={index} position={[item[1], item[0]]} />;

    });

  }

  function AddSinglePoint() {

    useMapEvents({

      click(e) {

        setSingleMarker({ lon: e.latlng.lng, lat: e.latlng.lat });

        if (setLatLng) {

          setLatLng(e.latlng.lat, e.latlng.lng);

        }

      },

    });

    return <Marker position={[singleMarker.lat, singleMarker.lon]} />;

  }

  return (

    <MapContainer center={center} zoom={zoom} scrollWheelZoom={false}>

      <TileLayer

        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

      />

      <Search />

      <MarkersDisplay />

      {add ? (

        <Polyline pathOptions={{ color: "blue" }} positions={reverse} />

      ) : null}

      <AreasDisplay />

      {add ? <AddPoints /> : null}

      {singleMode ? <AddSinglePoint /> : null}

    </MapContainer>

  );

};

export default Map;